<template>
	<view>
		<view class="pic-wrap">
			<view class="item" v-for="(item,i) in list" :key="i">
				<image :src="item" mode="aspectFit">
				</image>
				<image @click="delPic(i)" class="del" src="@/static/btn_del_1.png" mode="widthFix"></image>
			</view>
			<view class="item" v-if="video">
				<video :src="video"></video>
				<image @click="delVideo" class="del" src="@/static/btn_del_1.png" mode="widthFix"></image>
			</view>
			<view @click="actionHandle" v-if="list.length < maxCount" class="item">
				<image class="upload-btn" src="@/static/btn_upload_img.png" mode="widthFix"></image>
			</view>
		</view>
		<u-action-sheet :list="action_list" v-model="action_show" @click="pickerUploadType"></u-action-sheet>
	</view>
</template>

<script>
	// 返回数据 @upload { images:[], video: ""}
	export default {
		name: "n-upload",
		data() {
			return {
				list: [],
				video:'',
				action_show: false,
				action_list: [{
					text: '图片'
				}, {
					text: '视频'
				}],
			};
		},
		props: {
			maxCount: {
				type: Number,
				default: 9
			},
			// all 全部 image 图片 video 视频
			profileType:{
				type:String,
				default: 'all'
			}
		},
		methods: {
			actionHandle(){
				if(this.profileType =='all'){
					this.action_show = true
				}
				if(this.profileType =='image'){
					this.uploadImg()
				}
				if(this.profileType =='video'){
					this.uploadVideo()
				}
			},
			// 选择上传类型
			pickerUploadType(e) {
				if (e == 0) {
					if (this.list.length >= this.maxCount) {
						this.$tools.toast('最多9张图片')
						return
					}
					this.uploadImg()
				}
				if (e == 1) {
					this.uploadVideo()
				}
			},
			// 删除图片
			delPic(i) {
				this.list.splice(i, 1)
				this.$emit('upload',{
					images:this.list,
					video:this.video,
				})
			},
			delVideo() {
				this.video = ''
				this.$emit('upload',{
					images:this.list,
					video:this.video,
				})
			},
			uploadImg(e) {
				uni.chooseImage({
					count: this.maxCount - this.list.length,
					success: (img) => {
						this.$api.uploadImg(img).then(res => {
							this.list.push(...res)
							this.$emit('upload',{
								images:this.list,
								video:this.video,
							})
						})
					}
				})
			},
			uploadVideo(e) {
				uni.chooseVideo({
					success: (video) => {
						console.log(video)
						this.$api.uploadVideo(video).then(res => {
							this.video = res
							this.$emit('upload',{
								images:this.list,
								video:this.video,
							})
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.pic-wrap {
		@include flex;
		flex-wrap: wrap;
		margin-top: 30upx;

		.item {
			position: relative;
			margin-right: 15upx;
			margin-bottom: 15upx;

			image,
			video {
				width: 200upx;
				height: 200upx;
				border-radius: 8upx;
			}

			.del {
				width: 40upx;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1000;
			}
		}

		.item:nth-child(3n) {
			margin-right: 0;
		}

		.upload-btn {
			width: 200upx;
			height: 200upx;
			border-radius: 8upx;
		}
	}
</style>
